import { useState, useEffect } from 'react'
import './header.scss'
import { isLogin, getCookie } from '@/utils/auth'
import { Button, Popover } from 'antd'
import { Link, useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'
import type { Rootstate } from '@/store'

function PopoverContent() {
  return (
    <div>
      <p className="p-menu">
        <Link to="/" className="link">
          书签
        </Link>
      </p>
      <p className="p-menu">
        <Link to="/books" className="link">
          书签管理
        </Link>
      </p>
    </div>
  )
}

function Header() {
  const { name } = useSelector((state: Rootstate) => ({
    name: state.user.name
  }))

  const [open, setOpen] = useState(false)

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
  }

  return (
    <div className="flex-align-center flex-gap-10 header-right">
      {isLogin() && (
        <Popover
          content={<PopoverContent />}
          trigger="click"
          open={open}
          onOpenChange={handleOpenChange}
        >
          <div className="login-info">{name}</div>
        </Popover>
      )}
      {!isLogin() && <Link to="/login">登录</Link>}
    </div>
  )
}

// <div className="flex-align-center nav" style={{ gap: '20px' }}>
//   <div className="flex-align-center nav-list">
//     <Link to="/books">管理</Link>
//   </div>
//   <div className="login">{name}</div>
// </div>

export default Header
